---
type: tutorial
title: Créer un composant de navigation réutilisable
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Remplacez les éléments répétés sur plusieurs pages par un composant Astro réutilisable
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Maintenant que vous avez le même HTML sur plusieurs pages de votre site Astro, il est temps de remplacer ce contenu dupliqué par un composant Astro réutilisable !

<PreCheck>
  - Créer un nouveau dossier pour les composants
  - Créer un composant Astro pour afficher vos liens de navigation
  - Remplacer le HTML existant par un nouveau composant de navigation réutilisable
</PreCheck>

## Créer un nouveau dossier `src/components/`

Pour rassembler les fichiers `.astro` qui généreront du HTML, mais qui ne deviendront pas de nouvelles pages sur votre site web, vous aurez besoin d'un nouveau dossier dans votre projet : `src/components/`.


## Créer un composant de navigation

<Steps>
1. Créez un nouveau fichier : `src/components/Navigation.astro`.

2. Copiez vos liens pour naviguer entre les pages depuis le haut de n'importe quelle page et collez-les dans votre nouveau fichier, `Navigation.astro` :

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">Accueil</a>
    <a href="/a-propos/">À propos</a>
    <a href="/blog/">Blog</a>
    ```
    :::tip
    S'il n'y a rien dans le frontmatter de votre fichier `.astro`, vous n'avez pas à écrire les délimiteurs de code. Vous pouvez toujours les ajouter quand vous en aurez besoin.
    :::
</Steps>

### Importer et utiliser Navigation.astro

<Steps>
1. Retournez dans le fichier `index.astro` et importez votre nouveau composant à l'intérieur des délimiteurs de code :

    ```astro title="src/pages/index.astro" ins={2}
    ---
    import Navigation from '../components/Navigation.astro';
    import "../styles/global.css";
  
    const pageTitle = "Page d'accueil";
    ---
    ```

2. Ensuite, remplacez les éléments de lien HTML de navigation existants par le nouveau composant de navigation que vous venez d'importer :

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">Accueil</a>
    <a href="/a-propos/">À propos</a>
    <a href="/blog/">Blog</a>
    <Navigation />
    ```

3. Vérifiez l'aperçu dans votre navigateur et remarquez qu'il devrait être exactement le même... et c'est ce que vous voulez !
</Steps>

Votre site contient le même HTML qu'auparavant. Mais maintenant, ces trois lignes de code sont fournies par votre composant `<Navigation />`.

<Box icon="puzzle-piece">

## Essayer par vous-même - Ajouter la navigation au reste de votre site

Importez et utilisez le composant `<Navigation />` dans les deux autres pages de votre site (`about.astro` et `blog.astro`) en utilisant la même méthode.

N'oubliez pas
- d'ajouter une instruction d'importation en haut du script du composant, à l'intérieur des délimiteurs de code.
- de remplacer le code existant par le composant de navigation.

</Box>

:::note
Lorsque vous restructurez votre code sans changer l'apparence de votre page dans le navigateur, vous effectuez une **refactorisation**. Vous allez **refactoriser** plusieurs fois dans cette unité en remplaçant des parties du HTML de votre page par des composants. 

Cela vous permet de commencer rapidement avec un code fonctionnel, souvent dupliqué dans tout votre projet. Ensuite, vous pouvez améliorer de manière incrémentielle la conception de votre code existant sans changer l'apparence extérieure de votre site.
:::



<Box icon="question-mark">

### Tester vos connaissances



1. Vous pouvez faire cela lorsque vous avez des éléments répétés sur plusieurs pages :
    <MultipleChoice>
      <Option>
        redémarrer le serveur de développement
      </Option>
      <Option isCorrect>
        refactoriser pour utiliser un composant réutilisable
      </Option>
      <Option>
        créer une nouvelle page
      </Option>
    </MultipleChoice>

2. Les composants Astro sont :
    <MultipleChoice>
      <Option>
        réutilisables
      </Option>
      <Option>
        des fragments de HTML
      </Option>
      <Option isCorrect>
        les deux !
      </Option>
    </MultipleChoice>

3. Les composants Astro créeront automatiquement une nouvelle page sur votre site lorsque vous...
    <MultipleChoice>
      <Option>
        incluez `<html></html>`
      </Option>
      <Option>
        refactorisez
      </Option>
      <Option isCorrect>
        placez le fichier `.astro` dans `src/pages/`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux refactoriser le contenu en composants réutilisables.
- [ ] Je peux ajouter un nouveau composant à une page `.astro`.
</Checklist>

</Box>

### Ressources 

- [Aperçu des composants Astro](/fr/basics/astro-components/)

- [Refactorisation](https://refactoring.com/) (Anglais) <Badge class="neutral-badge" text="external" />
